<template>
  <div class="report-list" ref="wrapper" :style="{height: wrapperHeight + 'px'}">
    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :autoFill="autoFill" ref="loadmore">
      <div class="report-item" v-for="(v, k) in reportList" :key="k" @click="routerLinkTo(v.id)">
        <div class="content">
          <div class="image">
            <img src="/src/assets/icons/new-green.png" alt="new" v-if="v.if_new">
          </div>
          <div class="section">
            <div class="title">{{v.name}}</div>
            <div class="desc">{{v.desc}}</div>
          </div>
        </div>
        <div class="footer">
          <div class="item full">
            <div class="images">
              <img class="head-img" :src="img === null ? '/src/assets/error.png' : img" v-for="(img, ik) in v.head_img" :key="ik" ref="headImg">
            </div>
            <span class="v-line"></span>
            <span class="text blue">{{v.reward}}</span>
          </div>
          <div class="item mt-4">
            <span class="text">{{v.report_time}}</span>
          </div>
          <div class="item right mt-4">
            <img src="/src/assets/icons/eye.png">
            <span class="text mr-8">{{v.read}}</span>
            <img :src="`/src/assets/icons/zan-${v.if_already_zan ? '2' : '1'}.png`">
            <span class="text">{{v.zan}}</span>
          </div>
        </div>
      </div>
    </mt-loadmore>
  </div>
</template>

<script>
  export default {
    name: 'ReportList',
    data () {
      return {
        reportList: [],
        page: 1,
        limit: 10,
        allLoaded: false,
        autoFill: false,
        wrapperHeight: 0
      }
    },
    methods: {
      routerLinkTo (id) {
        this.$router.push({name: 'ReportDetail', params: {id: id}})
      },
      getReportList () {
        let params = {
          page: this.page,
          limit: this.limit
        }
        this.$post('/vue/report/get_list', params).then(data => {
          if (data.act_list.length > 0) {
            this.reportList = this.reportList.concat(data.act_list)
          } else {
            this.page--
            this.allLoaded = true
          }
        })
      },
      loadBottom () {
        setTimeout(() => {
          this.page++
          this.getReportList()
          this.$refs.loadmore.onBottomLoaded()
        }, 1500)
      }
    },
    mounted () {
      this.getReportList()
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(217, 117, 99);
    @c-blue: rgb(108, 184, 222);

  .report-list {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .report-item {
      padding: 12px 0 0 12px;
      text-align: left;
      background: #FFF;
      &::after {
        display: block;
        content: '';
        width: 100vw;
        height: 8px;
        background-color: rgb(240, 244, 247);
        margin-left: -12px;
      }
      &:last-child::after {
        display: none;
      }
      .content {
        border-bottom: 1px solid @c-235;
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        align-content: flex-start;
        justify-content: space-between;
        .image {
          display: block;
          flex: 0 0 auto;
          width: 22%;
          padding-bottom: 22%;
          height: 0;
          border-radius: 8px;
          background-image: url('/src/assets/logo.png');
          background-size: 100% 100%;
          position: relative;
          img {
            position: absolute;
            left: 0;
            top: 0;
            width: 50%;
            height: auto;
          }
        }
        .section {
          display: block;
          flex: 0 0 auto;
          width: 71%;
          margin-left: 3.3%;
          padding-right: 3.3%;
          .title {
            font-size: 13px;
            line-height: 24px;
            font-weight: bold;
            color: @c-124;
          }
          .desc {
            font-size: 12px;
            line-height: 20px;
            color: @c-169;
            margin-top: 12px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .footer {
        &:extend(.report-list .report-item .content);
        flex-wrap: wrap;
        border: 0;
        margin-top: 8px;
        font-size: 0;
        padding-right: 12px;
        padding-bottom: 6px;
        .mr-8 {
          margin-right: 8px;
        }
        .mt-4 {
          margin-top: 4px;
        }
        .item {
          width: 50%;
          flex: 0 0 auto;
          &.full {
            width: 100%;
          }
          &.right {
            text-align: right;
          }
          .images {
            width: 48px;
            text-align: center;
            display: inline-block;
            vertical-align: middle;
          }
          img {
            width: 24px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
            &.head-img {
              margin-left: -12px;
              border-radius: 100%;
              box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
              &:first-child {
                margin-left: 0;
              }
            }
          }
          .v-line {
            width: 1px;
            height: 20px;
            background-color: @c-226;
            margin: 0 12px;
            display: inline-block;
            vertical-align: middle;
          }
        }
        .text {
          font-size: 12px;
          line-height: 24px;
          color: @c-169;
          display: inline-block;
          vertical-align: middle;
          &.blue {
            color: @c-blue;
          }
        }
      }
    }
    .mint-loadmore-text {
      color: @c-169;
    }
  }
</style>